<template>
  <div>
    <el-dialog :title="titlecom" :visible.sync="dialogFormVisible" width="700px">
      <!-- :rules="rules" -->
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="原价" :label-width="formLabelWidth">
          <el-input v-model="form.originalprice"></el-input>
        </el-form-item>
        <el-form-item label="几天" :label-width="formLabelWidth">
          <el-input v-model="form.day"></el-input>
        </el-form-item>
        <el-form-item label="几次" :label-width="formLabelWidth">
          <el-input v-model="form.num"></el-input>
        </el-form-item>
        <el-form-item label="弱提醒提前几天" :label-width="formLabelWidth">
          <el-input v-model="form.weak"></el-input>
        </el-form-item>
        <el-form-item label="强提醒提前几天" :label-width="formLabelWidth">
          <el-input v-model="form.strong"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option v-for="item in stateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.typ" placeholder="请选择">
            <el-option v-for="item in typList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="海报" :label-width="formLabelWidth" prop="image">
          <!--    <el-upload class="avatar-uploader" action="" :http-request="comodityUpload" :show-file-list="false"
            :limit="1">
            <img v-if="form.images" :src="form.images" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="form.images" alt="" />
          </el-dialog> -->
          <el-upload class="avatar-uploader" action="https://dscc.suishilian.com/admin/uploadFile"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.images!=''" :src="form.images" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    vipAdd,
    vipUpdate
  } from "@/api/vippackage";
  export default {
    data() {
      return {
        stateList: [{
            id: 1,
            name: "基础产品"
          },
          {
            id: 2,
            name: "收款"
          },
          {
            id: 3,
            name: "优惠卷"
          },
          {
            id: 4,
            name: "充值购"
          },
          {
            id: 5,
            name: "单品快卖"
          },
          {
            id: 6,
            name: "商城"
          },
          {
            id: 7,
            name: "会员系统"
          },
          {
            id: 8,
            name: "股东"
          },
          {
            id: 9,
            name: "套餐"
          },
        ],
        typList: [{
            id: 1,
            name: "落地页"
          },
          {
            id: 2,
            name: "正常套餐"
          },
        ],
        dialogVisible: false,
        dialogFormVisible: false,
        formLabelWidth: "140px",
        form: {
          name: "",
          price: '',
          originalprice: '',
          day: '',
          num: '',
          weak: '',
          strong: '',
          sort: '',
          state: '',
          typ: '',
          images: "",
          title: ""
        },
        imgList: [],
        dialogImageUrl: "",
        dialogVisible1: false,
        rules: {
          image: [{
            required: true,
            message: "请上传图片",
            trigger: "blur"
          }],
          status: [{
            required: true,
            message: "请选择类型",
            trigger: "blur"
          }],
        },
        qubie: 0,
        id: 0,
        updateflag: false
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.form.images = res.data
        console.log(res, file)
        console.log(this.form)
      },
      beforeAvatarUpload(file) {

      },
      submitInfo() {
        if (this.updateflag) {
          vipUpdate({
            id: this.id,
            name: this.form.name,
            price: parseFloat(this.form.price),
            originalprice: parseFloat(this.form.originalprice),
            day: parseInt(this.form.day),
            num: parseInt(this.form.num),
            weak: parseInt(this.form.weak),
            strong: parseInt(this.form.strong),
            sort: parseInt(this.form.sort),
            state: parseInt(this.form.state),
            typ: parseInt(this.form.typ),
            images: this.form.images,
            title: this.form.title
          }).then(res => {
            this.dialogFormVisible = false;
            this.$emit('refresh', true)
            this.form = {
              name: "",
              price: '',
              originalprice: '',
              day: '',
              num: '',
              weak: '',
              strong: '',
              sort: '',
              state: '',
              typ: '',
              images: "",
              title: ""
            };
          })
        } else {
          vipAdd({
            name: this.form.name,
            price: parseFloat(this.form.price),
            originalprice: parseFloat(this.form.originalprice),
            day: parseInt(this.form.day),
            num: parseInt(this.form.num),
            weak: parseInt(this.form.weak),
            strong: parseInt(this.form.strong),
            sort: parseInt(this.form.sort),
            state: parseInt(this.form.state),
            typ: parseInt(this.form.typ),
            images: this.form.images,
            title: this.form.title
          }).then(res => {
            this.dialogFormVisible = false;
            this.$emit('refresh', true)
            this.form = {
              name: "",
              price: '',
              originalprice: '',
              day: '',
              num: '',
              weak: '',
              strong: '',
              sort: '',
              state: '',
              typ: '',
              images: "",
              title: ""
            };
          })
        }
      },
      add() {
        this.updateflag = false
        this.form = {
          name: "",
          price: '',
          originalprice: '',
          day: '',
          num: '',
          weak: '',
          strong: '',
          sort: '',
          state: '',
          typ: '',
          images: "",
          title: ""
        };
        this.dialogFormVisible = true;
      },
      edit(val) {
        this.updateflag = true
        this.id = val.id
        this.form = {
          name: val.name,
          price: val.price,
          originalprice: val.originalprice,
          day: val.day,
          num: val.num,
          weak: val.weak,
          strong: val.strong,
          sort: val.sort,
          state: val.state,
          typ: val.typ,
          images: val.images,
          title: val.title
        };
        this.dialogFormVisible = true;
      },
      // 关闭
      handleClose() {
        this.dialogFormVisible = false;
        this.$emit("refresh");
      },
    },
    watch: {},
    computed: {
      titlecom() {
        if (this.qubie == 0) {
          return "添加套餐";
        } else {
          return "修改套餐";
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .specificationInput {
    width: 250px;
  }

  .avatar-uploader,
  .avatar {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  // .avatar-uploader-icon[data-v-22a48a68] {
  //   // border: 1px dashed #d9d9d9;
  //   width: 300px;
  //   height: 300px;
  //   display: flex;
  //   justify-content: center;
  //   flex-direction: column;
  // }

  // .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  //   width: 300px;
  //   height: 300px;
  // }

  // .avatar-uploader .el-upload:hover {
  //   border-color: #409eff;
  // }

  // .specificationInput {
  //   width: 250px;
  // }

  // .addguigeBtn {
  //   margin-left: 100px;
  //   margin-bottom: 22px;
  // }

  // .avatar-uploader-icon {
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 300px;
  //   height: 300px;
  //   line-height: 300px;
  //   text-align: center;
  //   border: 1px dashed #c0ccda;
  // }

  // .avatar {
  //   width: 300px;
  //   height: 300px;
  //   display: block;
  // }

  // v-deep .el-upload--picture-card {
  //   width: 200px !important;
  //   height: 200px !important;
  // }

  // .specificationInput1 {
  //   width: 150px;
  // }
</style>
